<template>
  <div class="w-full h-60px flex justify-between items-center bg-blue-400 bg-opacity-0">
    <!--    左侧的菜单栏控制按钮-->
    <n-button text @click="qihuanzhankai()" class="mx-2">
      <n-icon size="20">
        <LayoutSidebarLeftExpand v-if="layoutaction.zhankai"/>
        <LayoutSidebarLeftCollapse v-else/>
      </n-icon>
    </n-button>
    <!--    中间菜单区-->
    <div class="h-full flex justify-center items-center">
      <div
          class="w-50px h-50px juzhong1 mx-3 font-semibold bg-white bg-opacity-0 border-opacity-100  border border-white cursor-pointer rounded hover:text-white"
          v-for="item in mymenu.menulist" @click="mymenu.chengemeu(item.key)"
          :class="[item.key===mymenu.firstmenu?' border border-red-400 border-opacity-100 text-red-400 bg-opacity-50':'']"
      >
        <span class="select-none">{{ item.label }}</span>
      </div>
    </div>
    <!--    右侧主要信息展示区-->
    <div class="flex justify-center items-center">
      <n-icon size="20" class="mx-2  dianji" @click="showsearh">
        <SearchOutlined></SearchOutlined>
      </n-icon>
      <n-icon size="20" class="mx-2  dianji" @click="suoding">
        <LockOutlined></LockOutlined>
      </n-icon>
      <n-icon size="20" class="mx-2  dianji" @click="getfullscreen">
        <FullscreenExitOutlined v-if="isfullscreen"></FullscreenExitOutlined>
        <FullscreenOutlined v-else></FullscreenOutlined>
      </n-icon>
      <n-dropdown trigger="hover" @select="handleSelect" :options="noticeoptions">
        <n-icon size="20" class="mx-2  dianji">
          <NotificationsOutline></NotificationsOutline>
        </n-icon>
      </n-dropdown>
      <n-dropdown trigger="hover" @select="handleSelect" :options="options">
        <n-avatar
            round
            size="small"
            :src="usertouxiang || defaulttouxiang"
            class="mx-2  dianji"
        />
      </n-dropdown>
      <n-icon size="20" class="mx-2  dianji" @click="init">
        <SettingOutlined></SettingOutlined>
      </n-icon>
    </div>
    <!--    右侧抽屉区-->
    <n-drawer v-model:show="drawerActive" :width="502">
      <n-drawer-content title="设置">
        <n-space class="flex items-center !my-2">
          <span>上下班时间：</span>
          <n-time-picker default-formatted-value="09:00:00" v-model:value="workTime.startTime" size="small"/>
          <n-time-picker default-formatted-value="18:00:00" v-model:value="workTime.endTime" size="small"/>
        </n-space>
        <n-space class="flex items-center">
          <span>背景颜色设置：</span>
          <n-color-picker :value="layoutaction.color" :on-update:value="changecolor" class="flex-1 min-w-200px"
                          size="small"/>
        </n-space>
        <n-space class="flex items-center">
          <span>背景图片设置：</span>
          <n-form-item :rule="urlRule">
            <n-input v-model:value="bgimg"/>
          </n-form-item>
          <n-button @click="changebgimg">确定</n-button>
        </n-space>
        <n-space class="flex items-center">
          <span>登录页样式：</span>
          <n-select v-model:value="loginplace" :options="loginplaceoptions" class="flex-1 min-w-200px" size="small" />
          <n-button @click="changeloginplace">修改</n-button>
        </n-space>
        <n-space class="flex items-center">
          <span>登录页背景图片：</span>
          <n-form-item :rule="urlRule">
            <n-input v-model:value="loginbgimg" size="small"/>
          </n-form-item>
          <n-button @click="changeloginbgimg">修改</n-button>
        </n-space>
      </n-drawer-content>
    </n-drawer>
    <search ref="searchref"></search>
  </div>
</template>

<script setup name="myheader" lang='ts'>
import screenfull from "screenfull";
import {useRoute, useRouter} from "vue-router";
import {LayoutSidebarLeftCollapse, LayoutSidebarLeftExpand} from "@vicons/tabler"
import {useLayout} from "../../store/moduls/layout";
import {
  SearchOutlined,
  UnlockOutlined,
  LockOutlined,
  FullscreenOutlined,
  FullscreenExitOutlined,
  SettingOutlined
} from "@vicons/antd"
import {NotificationsOutline} from "@vicons/ionicons5"
import {useUserInfo} from "../../store/moduls/userinfo";
import useState from '../../hooks/useState'
import {useMneu} from '../../store/moduls/menu'
import zhengze from '../../util/zhengze'
import {defineExpose, provide, ref} from "vue"
import {storeToRefs} from "pinia";

const router = useRouter()
const route = useRoute()
const searchref = ref(null)
const layoutaction = useLayout()
const useraction = useUserInfo()
const mymenu = useMneu()
// 默认的头像
const defaulttouxiang = ref("http://101.43.194.47:9000/file/yuangong.webp")
// 用户的头像
const {touxiang: usertouxiang} = storeToRefs(useraction);
const qihuanzhankai = () => {
  layoutaction.changezhankai()
}
// 抽屉显示隐藏
const drawerActive = useState('drawerActive', false)
// 用户头像下拉菜单内容
const options = ref([
  {label: "个人主页", key: "userinfo"},
  {label: "退出登录", key: "logout"},
])
// 通知信息列表
const noticeList = ref([])
// 渲染通知下拉菜单
const renderhtml1 = () => {
  if (noticeList.value.length === 0) {
    return h("div", {class: {"w-200px h-100px juzhong1": true},}, [
      h("span", {class: {"text-gray-300 select-none": true}}, {
        default() {
          return "暂无通知"
        }
      })
    ])
  } else {
    return h("div", {class: {"w-200px h-20px juzhong1": true},}, {
      default() {
        return "有通知"
      }
    })
  }
}
// 通知的下拉菜单
const noticeoptions = ref([
  {
    key: "wuyong",
    type: "render",
    render: () => {
      return renderhtml1()
    },
  },
])
const handleSelect = (key) => {
  switch (key) {
    case "logout":
      useraction.zhuxiao()
      router.replace({name: "Login"})
      break;
  }
}
// 点击搜索图标
const showsearh = () => {
  searchref.value.init()
}
// 锁屏
const suoding = () => {
  layoutaction.changelock(true)
}
// 点击全屏
const isfullscreen = ref(false)
const getfullscreen = () => {
  screenfull.toggle();
}
const changefullscreen = () => {
  isfullscreen.value = screenfull.isFullscreen
}

// 上班时间
const workTime = useState("workTime", {startTime: null, endTime: null})

onMounted(() => {
  screenfull.on('change', changefullscreen)
})
onUnmounted(() => {
  screenfull.off('change', changefullscreen)
})

// 修改背景颜色
const changecolor = (yanse) => {
  console.log(yanse, "是什么")
  layoutaction.changebg(yanse, "color")
}
// 背景图片校验规则
const bgimg = ref("")
const urlRule = ref({
  trigger: ['input', 'blur'],
  validator() {
    if (!zhengze.isUrl.test(bgimg.value)) {
      return new Error("请输入正确的url")
    }
  }
})
const changebgimg = () => {
  if (zhengze.isUrl.test(bgimg.value)) {
    layoutaction.changebg(bgimg.value, "bgimg")
  }
}

// 登录页的配置
const loginplace = ref("")
const loginbgimg = ref("")
const loginplaceoptions = ref([
  {label: "靠右", value: "right"},
  {label: "顶部", value: "top"},
  {label: "中间", value: "center"},
])
const changeloginplace=()=>{
  useraction.changeloginset("loginplacement",loginplace.value)
}
const changeloginbgimg=()=>{
  useraction.changeloginset("loginbgimg", loginbgimg.value)
}
// 初始化区域
const init = () => {
  // 从pinia里面拿出图片
  bgimg.value = layoutaction.bgimg
  // 从pinia里获取默认的登录页配置
  loginplace.value = useraction.loginplacement
  loginbgimg.value = useraction.loginbgimg
  // 显示抽屉
  drawerActive.value = true
}
// 将控制抽屉显示的方法，注入到所有子组件内
provide("initSet", init)
</script>

<style scoped>

</style>
